<template>
	<view class="col" style="position: relative;">
		<view class="row-between-center" style="margin: 40rpx;">
			<view class="nav row-center">
				<image src="/static/images/detail-back.png" class="nav-back"></image>
			</view>
			<view class="nav row-center">
				<image src="/static/images/detail-share.png" class="nav-back"></image>
			</view>
		</view>
		
		<view class="info col">
			<view class="row-between-center">
				<view class="title">
					名称
				</view>
				<image src="/static/images/fa-star.svg" class="collect"></image>
			</view>
			<view class="row-wrap" style="margin-top: 10rpx;">
				<view class="tag">热血</view>
				<view class="tag">运单</view>
				<view class="tag">热血</view>
				<view class="tag">运单</view>
				<view class="tag">热血</view>
				<view class="tag">运单</view>
			</view>
			
			<view class="desc">
				红发不良少年樱木花道升入湘北高中之后，对偶然间认识的同年级女生赤木晴子一见钟情。在晴子的期待下，对篮球规则一窍不通的花道加入到篮球队。在晴子的哥哥——篮球队队长赤木刚宪的严格训练以及对“超级新人”流川枫燃起的对抗意识的驱使下，花道身体中潜藏的才能终于得以显现，同时，他也被篮球这项运动的魅力所征服。
			</view>
			<view class="line"></view>
			<view class="author">
				作者团队
			</view>
			<view class="row" style="margin-top: 5rpx;">
				<view class="avater" v-for="item in 3">
					
				</view>
			</view>
		
			<view class="read row-center">阅 读</view>
			<view class="count">
				1.29亿人气|200评论|11万收藏
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getItemContent,getGoodsList,addCollect
	} from '@/api/change/index.js'
	import {getPageDetail} from '@/api/change/index.js'
	export default {
		data() {
			return {
				id:'',
				cover:'',
				showType:false,
				rateValue: 3,
				showCategory: false,
				showGoods: false,
				typeList:[
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},{
						name:1
					},{
						name:1
					}
				],
				detail:{},
				goodsList:[],
				itemId:'',
			
			}
		},
		
		onLoad(option) {
			this.id = option.id
			this.itemId = option.itemId
			this.getData()
		},
		
		methods: {
			goback(){
				uni.navigateBack()
			},
			
			getData(){
				getPageDetail(this.id).then(res=>{
					this.detail = res.data
					this.cover =  res.data.coverPicList[0]
				})
				getGoodsList({itemId:this.id}).then(res=>{
					this.goodsList = res.data
				})
				
			},
			
			addCollect() {
				addCollect({itemId:this.itemId}).then(res => {
					if(!this.detail.isCollection){
						this.detail.isCollection=1
					}else{
						this.detail.isCollection=0
					}
				})
			},
			
			showGoodsItem(){
				this.showGoods = true
			},
			close(){
				this.showGoods = false
				this.showCategory = false
			},
			onChange(e) {

			},
			 disabledScroll(){
			        return
			    },

			clickCategory() {
				this.showCategory = !this.showCategory
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff2d4;
	}
</style>
<style scoped lang="scss">
	.nav{
		width: 100rpx;
		height: 100rpx;
		// background-size: 100rpx 100rpx;
		// background-image:url('/static/images/nav-bg.png');
		
		line-height: 20px;
		background-color: rgba(79, 79, 79, 0.6);
		color: rgba(16, 16, 16, 1);
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		border-radius: 50%;
	}
	.nav-back{
		width: 60rpx;
		height: 60rpx;
	}
	.info{
		width: calc(100% - 120rpx);
		margin-left: 60rpx;
		margin-right: 60rpx;
		background-color: #979082;
		border-radius: 30rpx;
		padding: 40rpx 70rpx;
		position: fixed;
		bottom: 88rpx;
	}
	.title{
		font-size: 42rpx;
		font-weight: bold;
		color: white;
	}
	.collect{
		width: 60rpx;
		height: 60rpx;
	}
	.tag{
		margin-top: 10rpx;
		border-radius: 8rpx;
		background-color:#215476 ;
		padding: 8rpx 15rpx;
		color: white;
		font-size: 30rpx;
		margin-right: 30rpx;
	}
	.desc{
		margin-top: 30rpx;
		color: white;
		font-size: 30rpx;
		font-weight: bold;
	}
	.line{
		margin-top: 40rpx;
		background-color: #BEBEBE ;
		height: 5rpx;
		width: 300rpx;
	}
	.author{
		font-weight: bold;
		margin-top: 30rpx;
		font-size: 32rpx;
		color: white;
	}
	.avater{
		margin-right: 40rpx;
		background-color: red;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 4px solid rgba(255, 255, 255, 1);
	}
	.read{
		margin: 50rpx 0;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: rgba(33, 84, 118, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		text-align: center;
	}
	.count{
		color: rgba(248, 248, 248, 1);
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
		font-family: PMZDBiaoTi-regular;
	}
</style>